<template>
  <div class="container flex-col">
    <nav-bar title="设备管理" class="nav-bar" />
    <scroll-view
      refresher-enabled
      scroll-y
      @scrolltolower="handleNextPage"
      class="flex1"
      :refresher-triggered="refresherTriggered"
      @refresherrefresh="handleRefresherPulling"
    >
      <view v-if="list.length > 0">
        <view class="card" v-for="item in list" :key="item.id">
          <view class="top">
            <view class="lef">
              <view class="row name">{{ item.equipName }}</view>
              <view class="row">SN号：{{ item.equipSn }}</view>
              <view class="row">所属门店：{{ item.pubDomainShopName || "" }}</view>
            </view>
            <!--          <view class="rig">-->
            <!--            <view class="img"-->
            <!--              ><image-->
            <!--                src="../../../../static/images/tabbar/home_active.png"-->
            <!--                mode=""-->
            <!--              ></image-->
            <!--            ></view>-->
            <!--          </view>-->
          </view>
          <!--        <u-line :margin="'30rpx 0'"></u-line>-->
          <view class="btm">
            <view class="time">绑定时间：{{ item.bindTime }}</view>
            <view @click="jumpEquiEdit(item)" class="set">设置</view>
          </view>
        </view>
        <view class="blank-box"></view>
      </view>
      <view class="content" v-else>
        <xh-empty />
      </view>
    </scroll-view>
    <div class="footer">
      <u-button
        @click="handleSynchronization"
        type="primary"
        text="同步设备"
      ></u-button>
    </div>
  </div>
</template>

<script>
import { pubEquipList, syncPubEquip } from "@/service/api/sp-equi";
import { mapState } from "vuex";

export default {
  data() {
    return {
      params: { pageNum: 1, pageSize: 10 },
      list: [],
      hasNextPage: false,
      refresherTriggered: false,
    };
  },
  computed: {
    ...mapState("sp-common/auth", ["pubUserInfo"]),
  },
  created() {
    this.handleSynchronization();
  },
  methods: {
    async fetchList(isClear = false) {
      if (isClear) {
        this.list = [];
        this.params.pageNum = 1;
      }
      if (!this.pubUserInfo?.mainShopStatus) {
        this.params.pubDomainShopId = this.pubUserInfo.pubDomainShopVo?.id;
      }
      const res = await pubEquipList(this.params);
      if (res) {
        const { hasNextPage, list } = res;
        this.hasNextPage = hasNextPage;
        this.list = [...this.list, ...list];
        this.refresherTriggered = false;
      }
    },

    handleNextPage() {
      console.log("触底");
      if (!this.hasNextPage) return;
      this.params.pageNum += 1;
      this.fetchList();
    },
    handleRefresherPulling() {
      this.refresherTriggered = true;
      setTimeout(() => {
        this.fetchList(true);
      }, 200);
    },
    jumpEquiEdit(val) {
      this.$Router.push({
        name: "equiEdit",
        params: {
          equipSn: val.equipSn,
          pubDomainShopId: val.pubDomainShopId,
          isPrinter:val.isPrinter,
          isSpeaker:val.isSpeaker
        },
      });
    },
    async handleSynchronization() {
      //商户的情况下，两个参数都不传
      let params = {
        // shopId: this.pubUserInfo.pubDomainShopVo.id,
      };
      if (!this.pubUserInfo.mainShopStatus) {
        params.shopId = this.pubUserInfo.pubDomainShopVo.id;
      }
      syncPubEquip(params)
        .then(() => {
          this.fetchList(true);
        })
        .catch((e) => {
          this.fetchList(true);
        });
    },
  },
};
</script>

<style>
page {
  background-color: #f9f9f9;
  padding: 20rpx;
  box-sizing: border-box;
}
</style>
<style lang="scss" scoped>
.blank-box {
  width: 686rpx;
  height: 100rpx;
}
.container {
  height: 100vh;
  overflow: hidden;
  overflow-y: scroll;
  background-color: #f7f7f7;
}
.content {
  margin-top: 50%;
  //transform: translateY(-50%);
}
.card {
  width: 686rpx;
  background-color: white;
  padding: 30rpx 26rpx;
  box-sizing: border-box;
  border-radius: 18rpx;
  //box-shadow: 0 0 10rpx #ccc;
  font-weight: bold;
  font-size: 29rpx;
  font-weight: bold;
  //margin-bottom: 19rpx;
  margin: 0 auto 19rpx auto;
  .top {
    display: flex;
    justify-content: space-between;
    .lef {
      .row {
        margin-bottom: 24rpx;
        color: #13131380;
      }
      .name {
        font-size: 36rpx;
        color: #131313;
      }
    }
    .rig {
      text-align: center;
      .img {
        width: 150rpx;
        height: 150rpx;
        overflow: hidden;
        border-radius: 8rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .btm {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #13131380;
    .time {
      flex: 3;
    }
    .set {
      flex: 1;
      text-align: center;
      color: #fdca69;
    }
  }
}

.footer {
  position: fixed;
  bottom: 0;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  background-color: white;
  width: 100vw;
  left: 0;
}
</style>
